<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">

    <title>H+ 后台主题UI框架 - FooTable</title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

    <link href="/after/css/bootstrap.min.css?v=3.4.0" rel="stylesheet">
    <link href="/after/css/font-awesome.min.css?v=4.3.0" rel="stylesheet">

    <link href="/after/css/animate.min.css" rel="stylesheet">
    <link href="/after/css/style.min.css?v=3.0.0" rel="stylesheet">
    <link href="/after/js/laypage/skin/laypage.css" rel="stylesheet">

</head>

<body class="gray-bg">
<div id="app">
<div class="wrapper wrapper-content animated fadeInRight">

    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <div class="row">
                        <div class="col-sm-5">
                            <div class="input-group">
                                <input type="text" id="text" placeholder="请输入要搜索的内容" class="input-sm form-control"> <span class="input-group-btn">
                                        <button type="button" onclick="getAccidentPageList()" class="btn btn-sm btn-primary"> 搜索</button> </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="ibox-content">

                    <table class="footable table table-stripped toggle-arrow-tiny" data-page-size="8">
                        <thead>
                        <tr>
                            <th>订单号</th>
                            <th>退款原因</th>
                            <th>时间</th>
                            <th>
                                <select id="status" onchange="getAccidentPageList()">
                                    <option value="-1">所有</option>
                                    <option value="1">已通过</option>
                                    <option value="0">待审核</option>
                                    <option value="2">被拒绝</option>
                                </select>
                            </th>
                        </tr>
                        </thead>
                        <tbody>

                        <!--记录循环区域-->
                        <tr>
                            <td>TB014521632S</td>
                            <td>衣服质量不过关、不符合我的要求</td>
                            <td>2014-1-1 15:22:33</td>
                            <td><a href="#">待审核</a></td>
                        </tr>

                        <tr v-for="accident in result">
                            <td>{{accident.orderList}}</td>
                            <td>{{accident.reason}}</td>
                            <td>{{accident.id}}</td>
                            <td><a href="#">{{accident.status}}</a></td>
                        </tr>

                        </tbody>
                    </table>
                    <div id="pagenav"></div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<!-- 全局js -->
<script src="/after/js/jquery-2.1.1.min.js"></script>
<script src="/after/js/bootstrap.min.js?v=3.4.0"></script>
<script src="/after/js/laypage/laypage.js"></script>
<script src="/after/js/vue/vue.min.js"></script>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            result:[]
        }
    })

    $(function(){
        getAccidentPageList();
    })

//    分页查询  退款记录表
    var getAccidentPageList = function(indexPage){
        $.ajax({
            type:"POST",
            dataType:"json",
            data:{
                currentPage:indexPage||1,
                pageSize:8,
                reason:$("#text").val(),
                status:$("#status").val()
            },
            url:"/returnOrder/queryAccident.do",
            success:function(msg){
                app.result = msg.page;
                laypage({
                    cont:'pagenav',
                    pages:msg.totalPage,
                    first:true,
                    last:true,
                    curr:indexPage||1,
                    jump:function(obj,first){
                        if(!first){
                            getAccidentPageList(obj.curr);
                        }
                    }
                })
            },error:function(){
                alert("搜索失败！");
            }
        })
    }


</script>


<!--统计代码，可删除-->

</body>

</html>